<template>
  <div>
    <el-breadcrumb class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>账号中心</el-breadcrumb-item>
      <el-breadcrumb-item>HR账号</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form :inline="true" v-model="Hr" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item label="公司名称">
        <el-input v-model="Hr.companyName" placeholder="公司名称"></el-input>
      </el-form-item>
      <el-form-item label="Hr姓名">
        <el-input v-model="Hr.name" placeholder="Hr姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getHrList()">查询</el-button>
      </el-form-item>

      <el-table
              v-loading="loading"
              :data="pageInfo.list"
              style="width: 100%"
              :stripe=true
              :border=true
              height="450">
        <el-table-column
                prop="hruserName"
                label="Hr用户名"
                width="150">
        </el-table-column>
        <el-table-column
                label="公司名称"
                width="300">
          <template slot-scope="scope">
            <span v-if="scope.row.companyName">{{scope.row.companyName}}</span>
            <span v-else>暂无公司</span>
          </template>
        </el-table-column>
        <el-table-column
                prop="name"
                label="Hr姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别"
                width="70">
        </el-table-column>
        <el-table-column
                prop="hrTelephone"
                label="电话"
                width="120">
        </el-table-column>
        <el-table-column
                label="注册时间"
                width="220">
          <template slot-scope="scope">
            <span >{{ makeDate(scope.row.hrCreatetime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="停用/启用">
          <template slot-scope="scope">
            <el-switch
                    @change="deleteHr($event,scope.row.hrId)"
                    v-model="scope.row.hrisDelete"
                    :inactive-value="1"
                    :active-value="0"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div style="float: right">
      <el-pagination
              background
              layout="prev, pager, next"
              :total="pageInfo.total"
              :page-size="pageInfo.pageSize"
              @current-change="handlePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {makeSimpleDate,makeDate} from "../../../common/js/dateformat"
  export default {
    name: "admin-hr-account",
    created(){
      this.getHrList();
    },

    data(){
      return {
        loading: false,
        pageIndex:1,
        Hr:{
          name:'',
          companyName:'',
        },
        pageInfo:{}
      }
    },
    methods:{
      getHrList(){
        this.loading=true;
        this.$ajax.post(this.$config.url + `hr/selHrList/${this.pageIndex}`,this.Hr
        ).then(res => {
          this.pageInfo = res.data;
          this.loading = false;
        }).finally(() => {
        })
      },
      AllPosition(companyId){
        console.log(companyId);
      },
      deleteHr($event,hrId){
        this.$ajax.post(this.$config.url + `hr/changeHrIsdeleted`,{
            "hrId":hrId,
            "hrisDelete":$event
          }
        ).then(res => {
          if(res.data==true){
            this.$message.success("修改成功")
          }else{
            this.$message.error("出错了，修改失败")
          }
          this.getHrList()
        }).finally(() => {
        })
      },
      makeSimpleDate(date) {
        return makeSimpleDate(date)
      },
      makeDate(date){
        return makeDate(date)
      },
      handlePage(val) {
        //console.log(val)
        this.pageIndex = val
        //加载数据
        this.getHrList()
      },
    }
  }
</script>

<style scoped>

</style>